<script setup>
    import {ref} from "vue"
    // 接收值
    const model = defineModel()
    
    // 是否处于编辑状态
    const isEdit = ref(false)

    // 监听双击事件
    const onDblclick = () => {
        isEdit.value = true
    }

    // 监听回车事件
    // 由于我们监听的是keydown原生事件，因此可以获取到对应的DOM元素
    const onEnter = (e) => {
        const content = e.target.value.trim()
        // 对输入文本进行校验
        if(content != "") {
            // 校验通过，修改数据
            model.value = content
        }
        // 退出
        isEdit.value = false
    }
</script>

<template>
    <div v-if="isEdit">
        <!-- 使用v-focus自定义指令实现自动聚焦
          绑定value属性让我们进入输入框能获取到以前的值 -->
        <input type="text" v-focus :value="model" @keydown.enter="onEnter">
    </div>
    <div v-else @dblclick="onDblclick" class="edit">
        {{ model }}
    </div>
</template>

<style scoped>
    .edit {
        cursor: pointer;
    }
</style>